<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件处理器</title>
	<link rel="icon" href="../logo.png">
	<link rel="stylesheet" href="../style.css">
	<script src="../vue.js"></script>
	<style>
		.active{
			width: 100px;
			height: 100px;
			border:1px solid red;
		}
		.text-center{
			text-align: center;
		}
		.bold{
			font-weight: bolder;
		}
	</style>
</head>
<body>
	<div id="example1">
		<button v-on:click="add">add +1</button>
		<div>点击了{{counter}}次</div>
		<h2 style="color: red">v-model="counter" 仅仅支持绑定input</h2>	
		<h4>way2</h4>	
		<button v-on:click="counter2+=1">add +1</button>
		<div>点击了{{counter2}}次</div>

	</div>
	<script>
		var app1=new Vue({
			el:'#example1',
			data:{
				counter:0,
				counter2:0
			},
			// computed:{
			// 	counter:this.counter+=1,
			// }
			methods:{
				add:function () {
					this.counter+=1;
				}
			}
		})
	</script>
</body>
</html>